<template>
  <div
    class="el-collapse-item"
    :class="{ 'is-active': isActive, 'is-disabled': disabled }"
  >
    <div
      role="tab"
      :aria-expanded="isActive"
      :aria-controls="`el-collapse-content-${id}`"
      :aria-describedby="`el-collapse-content-${id}`"
    >
      <div
        :id="`el-collapse-head-${id}`"
        class="el-collapse-item__header"
        role="button"
        :tabindex="disabled ? -1 : 0"
        :class="{
          focusing: focusing,
          'is-active': isActive,
        }"
        @click="handleHeaderClick"
        @keyup.space.enter.stop="handleEnterClick"
        @focus="handleFocus"
        @blur="focusing = false"
      >
        <slot name="title">{{ title }}</slot>
        <el-icon
          class="el-collapse-item__arrow"
          :class="{ 'is-active': isActive }"
        >
          <arrow-right />
        </el-icon>
      </div>
    </div>
    <el-collapse-transition>
      <div
        v-show="isActive"
        :id="`el-collapse-content-${id}`"
        class="el-collapse-item__wrap"
        role="tabpanel"
        :aria-hidden="!isActive"
        :aria-labelledby="`el-collapse-head-${id}`"
      >
        <div class="el-collapse-item__content">
          <slot></slot>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, ref } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElCollapseTransition } from '@/collapse-transition'
import ElIcon from '@/components/icon'
import { generateId } from '@/utils/util'
import { CollapseProvider } from './collapse.type'
import { auto } from '@popperjs/core'
export default defineComponent({
  name: "ElCollapseItem",
  components: { ElCollapseTransition, ElIcon, ArrowRight },
  props:{
    title:{
      type: String,
      default: ''
    },
    name:{
      type: [String,Number] as PropType<string|number>,
      default:()=>{
        return generateId()
      }
    },
    disabled:Boolean,
  },
  setup(props){
    const collapse = inject<CollapseProvider>('collapse')
    const contentWrapStyle = ref({
      height: auto,
      display:'block'
    })
    const contentHeight = ref(0)
    const focusing = ref(false)
    const isClick = ref(false)
    const id = ref(generateId())

    const isActive = computed(()=>{
      return collapse?.activeNames.value.indexOf(props.name) > -1
    })

    const handleFocus = () => {
      setTimeout(() => {
        if (!isClick.value) {
          focusing.value = true
        } else {
          isClick.value = false
        }
      }, 50)
    }

    const handleHeaderClick = () => {
      if (props.disabled) return
      collapse?.handleItemClick(props.name)
      focusing.value = false
      isClick.value = true
    }

    const handleEnterClick = () => {
      collapse?.handleItemClick(props.name)
    }

    return {
      isActive,
      contentWrapStyle,
      contentHeight,
      focusing,
      isClick,
      id,
      handleFocus,
      handleHeaderClick,
      handleEnterClick,
      collapse,
    }
  }
})
</script>

<style scoped>

</style>
